
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ page import="spanishgringo.data.GoogleData"%>
<%@ page import="spanishgringo.data.GaProfile"%>
<%@ page import="java.util.Calendar"%>
<%@ page import="java.text.SimpleDateFormat"%>
<%
  GoogleData googleData = (GoogleData)request.getAttribute("googleData");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta http-equiv="description"
	content="Easily export your data from Google Analytics, use segments, compare different profiles and build graphs">
<title>Google Analytics Evolution | See your data by Month | Mix
and Match Sites | by Spanishgringo</title>
<link rel="stylesheet"	href="css/ui-lightness/jquery-ui-1.8.custom.css" type="text/css" />
<link rel="stylesheet" href="css/styles.css" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<script src="js/jquery-ui.min.js"></script>
<!--[if IE]><script type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
<script src="js/jquery.flot.min.js"></script>
<script src="js/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.easing-1.3.pack.js"></script>
<link rel="stylesheet" href="js/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen">


</head>
<body>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-1683366-9']);
  _gaq.push(['_trackPageview', '/Main/App']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
  })();

</script>
	
<div id="wrapper">
<div id="header" class="head">
<h1>Google Analytics Evolution - by Spanishgringo</h1>
<div class="blogWrap"><a href="http://spanishgringo.blogspot.com">My
Blog: SEO, Web Marketing &amp; More</a>
<br/>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" class='donateForm'>
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
<input type="image" width="50" src="http://dl.dropbox.com/u/232/Images/x-click-butcc-donate.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

<div class="share">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a href="http://addthis.com/bookmark.php?v=250&amp;username=spanishgringo" class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_google"></a>
<a class="addthis_button_twitter"></a>
</div>
<!-- AddThis Button END -->
</div>

</div>
<div class="small-text" style='position: relative;'><a
	href="<%= googleData.getAuthenticationUrl() %>">Log Out</a>
<p style="padding-top:0px;margin-top:0px;">You have authorized this application to access your Google
Analytics account. <a href="<%= googleData.getAuthorizationUrl() %>">Revoke
access</a></p>

<div id="authError">
<%
	      if (googleData.getAuthorizationErrorMessage() != null) {
	        out.println(String.format("<p>Error authorizing access to this applications: %s</p>",
	            googleData.getAuthorizationErrorMessage()));
	      }
	    %>
</div>

</div>
</div>

<div id="controls" class="small-text">
<div id="accountData">
<%
            if (googleData.getAccountListError() != null) {
              out.println(googleData.getAccountListError());
            } else {
              // Create a dropdown for users to select a Google Analytics account to view.
          %>

<form name="accountForm" id="accountForm" method="GET" action="/main">

<%
                  if (googleData == null || googleData.getAccountList().size() == 0) {
                    out.println("<li>No Accounts Found for this User</li>");
                  } else { 
                	  %>

<div class="accountsDiv"><strong>Account:</strong> <select
	class='accounts'></select></div>
<div class='profiles'>
<p class='selectLinks'><strong>Profiles:</strong><a
	class='checklink checkall' href='#'>Select All</a> <a
	class='checklink checknone' href='#'>Select None</a></p>
<ul>
	<%
                	  
                    for (GaProfile accountData : googleData.getAccountList()) {
                    
                    	out.println(String.format("<li class='%s' style='display:none;'><label for='%s' class='check%s'><input type='checkbox'%s name='%s' id='%s'value=\"%s\">%s</input></label></li>",
                    			accountData.getAccountName(), accountData.getProfileId(), accountData.getProfileId().equals(googleData.getTableId()) ? " selected" : "",accountData.getProfileId().equals(googleData.getTableId()) ? " checked " : "", accountData.getProfileId(), accountData.getProfileId(), accountData.getProfileId(),  accountData.getProfileName())
                      	);
                    
					  
                    }                  
               	%>

</ul>
</div>

<%
                  	}
                  %>
<hr />
<div class="dateBar">
	<p><strong>Dates:</strong></p>
	<label class='check' for="startDate">Start
Date <input class='cal' id="startDate" name="startDate" size="10"
	<%
                	 SimpleDateFormat gaDate = new SimpleDateFormat("yyyy-MM-dd");
					  Calendar rightNow = Calendar.getInstance();
					  rightNow.set(Calendar.DATE,rightNow.getMinimum(Calendar.DATE));
					  rightNow.add(Calendar.MONTH,-3);
					 
                	out.print("value='" +(request.getParameter("startDate")==null?   gaDate.format(rightNow.getTime()) :request.getParameter("startDate"))+"'");
                	 %> /></label>
<label class='check' for="endDate">End Date <input class='cal'
	id="endDate" name="endDate" size="10"
	<%
                	rightNow = 
                		Calendar.getInstance();
                	  rightNow.add(Calendar.MONTH,-1);
                	rightNow.set(Calendar.DATE,rightNow.getActualMaximum(Calendar.DATE));
                	out.print("value='" +(request.getParameter("endDate")==null?  gaDate.format(rightNow.getTime()) :request.getParameter("endDate"))+"'");
                	 %> /></label>

</div>
<hr />

<ul class="segmentBar">
	<li><p><strong>Segment:</strong></p></li>
	<!--
                	<li><label class="chkNone"><input type="radio" id="segment" name="segment" value="none" checked/>None</label></li>       
<li><label class="chkCPC"><input type="radio" id="segment" name="segment" value="dynamic::ga:medium==cpc"/>CPC</label></li>
                	<li><label class="chkNoCPC"><input type="radio" id="segment" name="segment" value="dynamic::ga:medium!=cpc"/>No-CPC</label></li>
-->
	<li><label class="chkDefined"><input type="radio"
		id="segment" name="segment" value="defined" checked="checked" />Defined</label>
	<select id="segDefined" name="segDefined" value="" class='segments'>
		<%
                	  
                    for (String [] segmentData : googleData.getSegmentList()) {
                    	out.println(String.format("<option value='%s'>%s</option>",
                    			segmentData[0],segmentData[1],segmentData[0],segmentData[2])
                      	);
                    
					  
                    	}                  
               		%>
	</select></li>
	<li><label class="chkOther"><input type="radio"
		id="segment" name="segment" value="other" />Other</label> <input type="text"
		id="segOtherTxt" name="segOtherTxt" value="" size="35" /> <span
		style="font-style: italic;">example: dynamic::ga:medium!=cpc</span><a class="iframe fancy help" href="http://code.google.com/apis/analytics/docs/gdata/gdataReferenceDataFeed.html#segment" ><img class="help" src="images/Help.png" alt="Google Reference for Segment element of GA API Query" height="18" width="18" border="0"/></a></li>
</ul>
<script>

            	<%
            		StringBuffer segNames = new StringBuffer();
					StringBuffer segDefinitions = new StringBuffer();
                
					for (String [] segmentData : googleData.getSegmentList()) {
                	
					segNames.append(segmentData[1]+"|");
					segDefinitions.append(segmentData[2]+"|");              
					
                	}
					
					out.println(String.format("var segName = '%s'; var segDefinition = '%s';",
                			segNames.toString(),segDefinitions.toString())
                  	);
           		%>

            	var segmentNames = segName.split("|");
            	var segmentDefinitions = segDefinition.split("|");
            	var lame =segmentNames.pop(); lame =segmentDefinitions.pop(); lame = null;  
            	
                </script>

<hr />
<div style="position:relative;padding:0px 0px 4px;">
	<p><input type="hidden" value="" id="tableId" name="tableId" /> <input
	type="hidden" value="true" id="ajax" name="ajax" /> <input id="submit"
	type="submit" value="Get Data" /> <span style="display: none;"
	class="infoPostQuery">&nbsp;&nbsp; <a class="clearTable"
	href="#">Clear Results</a> &nbsp;&nbsp; Click on a column header to
Graph the selected data rows below.</span></p>
<a href="http://code.google.com/apis/analytics/docs/gdata/gdataReferenceDimensionsMetrics.html#dimensions" class="iframe fancy" style="display: inline-block; position: absolute; top: 5px; right: 28px;">
	More info about GA dimensions & metrics
</a>
<a href="http://code.google.com/apis/analytics/docs/gdata/gdataReferenceDimensionsMetrics.html#dimensions" class="iframe fancy"><img height="18" width="18" border="0" style="text-decoration: none; border: medium none; top: 4px; display: inline-block; position: absolute; right: 4px;" class="help" src="images/Help.png" alt="Google Reference for Segment element of GA API Query">
</a>
<a class="fancy inline" href="#ciExplained" style="display: inline-block; position: absolute; top: 42px; right: 2px;font-size:.8em;">
	More info about CI
</a>
</div>

</form>
<%
            }
          %>
</div>
<!-- end id accountData -->
<hr></hr>
</div>





<div id="dataTable"></div>


</div>
<div class="browserMsg">Works best with Firefox and Chrome <img width="116" height="23" src="images/app-engine-logo.png" alt="app engine logo"/></div>

<script>


    $(document).ready(function() {
       //organize the accounts into lists and prepare the account/profile controls
		  var accounts = new Array();
		  $('li', '.profiles').each(function(){
		  	var prevClass = $(this).prev().attr('class');
			var thisClass = $(this).attr('class');
			if(prevClass!=thisClass){
				accounts.push(thisClass);
			}
		  });
		  
		  //build the accounts select
		  for (i=0;i<accounts.length;i++){
		  	$('select.accounts').append($('<option value="'+ accounts[i]+'">'+ accounts[i] +'</option>'));
		  }
		  $('option:first').attr("selected", "selected");
		  var optClass = $('option:first').val();
		  $('li', '.profiles').filter(function(index){
		  	return $(this).attr("class")==optClass;
		  }).fadeIn("fast");
		  
		  //hide the current profiles and fade in the new profiles for the account
		  $(".accounts").change(function(){
		  	$('li', '.profiles').hide().find('input:checked').attr("checked","").parent().removeClass('selected');
			$('li', '.profiles').filter(function(index){
		  	return $(this).attr("class")==$('.accounts').val();
		  }).fadeIn('slow');
		  });
		  $('input:checked', '.profiles').parent().addClass('selected');
		  $('label.check input','.profiles').change(function(){
				$(this).parent().toggleClass('selected');
			  });
		  
		  //Select all Select None functionality
		  jQuery('a.checklink').click(function(event) {
    	   event.preventDefault();
    	  
    	   var checked = false;
    	  
    	   if (jQuery(this).hasClass('checkall')) {
		   	checked = true;
			jQuery('.profiles li:not([style*="none"])').find('input[type="checkbox"]').attr('checked', checked).parent().addClass('selected');
		   }
		   else {
		   	jQuery('.profiles li:not([style*="none"])').find('input[type="checkbox"]').attr('checked', checked).parent().removeClass('selected');
		   }
    	   });

          $.datepicker.setDefaults({dateFormat:'yy-mm-dd'});
          $(".cal").datepicker();

		$('.chkOther').click(function(){
			$('#segOtherTxt').focus().select();
			});

		jQuery('select, input:text','.segmentBar').click(function(){
		      $(this).prev().children().click();
		});

		$("a.fancy").fancybox({
			'hideOnContentClick': true,
			'width': 880,
			'height': 560,
			'autoScale': true
			
		});

//workaround for lame GA API cuotas
var activeQueries = 0;
var gaQueries = new Array(0);

/*
 * Ajax function to actually retrieve the data and paint the picture
 * Complex or large queries can time out in appengine
 */
function getData (query){
					$("#tableId").val(query.tableId);
					$.ajax({
						url:"/main",
						type:"get",
						data:{
							tableId: query.tableId,
							ajax:query.ajax,
							startDate: query.startDate,
							endDate: query.endDate,
							segment:query.segment,
							segDefined: query.segDefined,
							segOtherTxt:query.segOtherTxt,
							segmentName:query.segmentName
							},
						error: function(xhr, status, error){
								if (xhr.status == "503" || xhr.status == "500") {
								//recall the query
								getData(query);
								}
								else {
									$(query.dataRow).empty().append("Whoops! There was an error with this request. Please try again.");
									$(query.dataRow).append("<br/>Status: " + status + " | Error: " + error);
								}
							},
						success: function(data, status, xhr){
							if(status=="success"){
								$(query.dataRow).empty().append(data);
					     		//console.log("Data Loaded");
					     		var siteText =$('h3', query.dataRow).text().match(/www\.logismarket\.[a-z\.]+ /gi)+""; 
					     		if(siteText!="null"){
						     		siteText = siteText.substring(siteText.lastIndexOf(".")+1,siteText.lastIndexOf(" "));
						     		$('th:last', query.dataRow).after('<th>'+"Site"+'</th>');
						     		$('tr', query.dataRow).each(function(){
						     			$('td:last', this).after('<td>'+siteText.toUpperCase()+'</td>');
						     											
						     		});
					     		}
									$('.colHead').click(function(e){
										//console.log(e.target);
										makeGraph(e);
										return false;
										
									});
									if(data.indexOf('queryError')>=0){
									  _gaq.push(['_trackEvent','data','request', 'error']);
									}else{
										_gaq.push(['_trackEvent','data','request', 'success']);
										}
							}else{
								$(query.dataRow).empty().append("Whoops! There was an error with this request. Please try again.");
						
							}
							
								}
					});

/*end of getData*/				 
 }






/*
 * Submit the data for each checked profile and paint the results in the results area
 * Complex or large queries can time out in appengine
 */
		$("#submit").click(function(){
			 $("input:checked", ".profiles").each(function(){
					var dataRow = $('<div class="dataRow"><img src="images/loading.gif"/> <span class="loading">loading...please wait</span></div>'); 
					$("#dataTable").prepend(dataRow);
					var query =  {
							tableId: $(this).val(),
							ajax: $("#ajax").val(),
							startDate: $("#startDate").val(),
							endDate: $("#endDate").val(),
							segment:$("#segment:checked").val(),
							segDefined:$("#segDefined").val(),
							segOtherTxt:$("#segOtherTxt").val(),
							segmentName:$('input:checked','.segmentBar').val()=="defined" ? $('#segDefined :selected').text():$("#segOtherTxt").val(),
							dataRow:dataRow
							};

						gaQueries.push(query);	
			 			});
					$('.infoPostQuery').fadeIn("slow");
				var i = gaQueries.length;
				
				for (var x = 0;x<i;x++){
					getData(gaQueries.shift());

					}
					$( "#dataTable" ).sortable( { items: 'div.dataRow', axis:'y', handle: 'h3' } );
					return false;
			});


	//clears the data results area including any graphs           
		$(".clearTable").click(function(){
			$("#dataTable").empty();
			$("#placeholder, #legendWrap").remove();
		});
		
		//function to generate the flot graphs
		function makeGraph(e){
				//console.log(e.target);
				var col = 2;
				if (e.target.className != "graphIt") {
					col = $(e.target).parent().attr("cellIndex");
				}
			//	console.log("col is now: " +col);
				$("#placeholder, #legendWrap").remove();
				$('<div id="placeholder" style="width:940px;height:420px"></div>').insertBefore("#dataTable");
				$('<div id="legendWrap" style="width:940px;height:auto;text-align:center;"></div>').insertAfter("#placeholder").append($('<div style="display:inline-block;"id="legend""></div>'));
				var series = new Array();
				$('input:checked','#dataTable').each(function(){
					var plotSeries = new Array();
					//var i = -1;
					var date = new Date();
					$('.dataRow').has(this).find("tr").has("td").each(function(){
						var val = $('td',this).eq(col).text();
						val = val.length > 0 ? parseFloat(val.replace(/,/g,"")):0;
						date.setUTCFullYear($('td',this).eq(0).text());
						date.setUTCMonth($('td',this).eq(1).text()-1);
						date.setUTCDate(1);
						date.setUTCHours(0);
						plotSeries.push([date.getTime(),val]);
						//i++;
						});
			   	//	var empty = plotSeries.shift();
	
//TODO Fix this siteText to use the actual profile name
//TODO make the legend smaller but clearer
					var dataRow = $('.dataRow').has(this);
					var dataParams = $('.dataParams',dataRow).text(); 
		     		var siteText = $('label',dataRow).text() + ": " + dataParams.substring(0,dataParams.indexOf(" |"));
					/*	
					var patt1=/www\.logismarket[-a-z]*\.[a-z\.]+/gi;
					siteText = siteText.match(patt1)+""; 
					
		     		if(siteText!="null"){
			     		siteText = siteText.substring(siteText.lastIndexOf(".")+1);
			 		}
		     		*/
	
			   		var dat={};
					    dat.label= $('th',$('.dataRow').has(this)).eq(col).text()+": "+ siteText;
					    dat.data = plotSeries;
					    //dat.lines = { show: true, fill: true };
					  series.push(dat);
	
				});
				
			    var options = {
			        lines: { show: true },
			        points: { show: true },
			        legend: {
						labelBoxBorderColor: null,
	    				//backgroundOpacity: .5
						container:$('#legend'),
						noColumns:2
					},
					  grid: {
	    				backgroundColor: { colors: ["#eee", "#fff"] },
						hoverable: true, clickable: true,
						mouseActiveRadius:20
	  					},
				  xaxis: {
	    			mode: "time",
					timeformat: "%m-%y",
					minTickSize: [1, "month"]

	  				},
					yaxis:{
						tickFormatter:function(val, axis){
							return val.toFixed(axis.tickDecimals);
						}
					}
						
					  
			    };
			   	$.plot($("#placeholder"), series, options);	
				
		//shows the tooltips in the chart
		function showTooltip(x, y, contents) {
	        $('<div id="tooltip">' + contents + '</div>').css( {
	            position: 'absolute',
	            display: 'none',
	            top: y + 4,
	            left: x + 12,
	            border: '1px solid #fdd',
	            padding: '4px',
	            'background-color': '#fee',
	            opacity: 0.80,
				width:'auto',
				height:'auto',
				maxWidth:'280px'
	        }).appendTo("body").fadeIn("slow");
	    }
	
	    var previousPoint = null;
	    $("#placeholder").bind("plothover", function (event, pos, item) {
	
	            if (item) {
	                if (previousPoint != item.datapoint) {
	                    previousPoint = item.datapoint;
	                    
	                    $("#tooltip").remove();
	                    var x = item.datapoint[0].toFixed(2),
	                        y = item.datapoint[1].toFixed(2);
	                    
	                    showTooltip(item.pageX, item.pageY,
	                                "<strong>"+item.series.label+ "</strong> " + parseFloat(y));
	                }
	            }
	            else {
	            	$("#tooltip").remove();
	                previousPoint = null;            
	            }
	        
	    });
	
				
				return false;
	}

		
	    });
  </script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=spanishgringo"></script>
<a id="feedbackLink" class="fancy" href="#feedback">feedback for Google Analytics Evoution</a>
<div id="fancyHolder">
	<div id='ciExplained' >
		<h3>CI represents Confidence Interval (for Visits in this app)</h3>  
		<p style="margin-bottom:0px;padding-bottom:0px;">Legend for the CI column</p>
		<ul style="margin-top:0px;padding-top:0px;">
		<li>0 indicates no sampling present</li>
		<li>* means unreliable results</li>
		<li>All other non-0 values is the Margin of Error at a 95% confidence level</li>
		</ul>
		<p><a href="http://code.google.com/apis/analytics/docs/concepts/gaConceptsSampling.html#confidenceInterval" target="_blank">Google Help page on Confidence Interval &amp; sampling</a></p>
	
	</div>
	
	<div class="fancy feedback" id="feedback">
		<h3>Thanks for using Google Analytics Evolution.</h3>
		
		<h3>I appreciate your feedback.</h3>
		<p>
		<a target="_blank" href="https://www.blogger.com/comment.g?blogID=1956185818738279972&postID=8277640403349538867">Leave feedback for the app</a>
		</p>
		<p>
		<a target="_blank" href="http://code.google.com/p/google-analytics-evolution/issues/list">New idea or found a bug? Report it in Google Code</a>
		</p>
	</div>
	
</div>
</body>
</html>

